<template>
  <div class="d">
    <header-m></header-m>
    <div v-if="isOnline">
      <el-radio-group v-model="radio" @change="change">
        <div v-show="adress.length">
          <div v-for="(item, index) in adress" :key="index">
            <el-radio :label="index" border :id="index"
              >{{ item.address }}
            </el-radio>
            <el-button class="right" size="mini" @click="del(index, item.id)">删除</el-button>
          </div>
        </div>
      </el-radio-group>
      <div v-show="isShow" class="newAdd">
        <el-cascader
          size="large"
          :options="options"
          v-model="selectedOptions"
          @change="handleChange"
        >
        </el-cascader>
      </div>
      <el-form v-show="isTrue">
        <el-form-item label="详细地址:">
          <el-input type="text" v-model="intoAdd"></el-input>
        </el-form-item>
      </el-form>
      <el-button class="button" @click="address()">添加地址</el-button>
      <el-button v-show="isShow" @click="add()">提交</el-button>
    </div>
    <div v-else>未登录</div>
  </div>
</template>
<script>
import headerM from "../components/HeaderM";
import {
  provinceAndCityData,
  regionData,
  provinceAndCityDataPlus,
  regionDataPlus,
  CodeToText,
  TextToCode,
} from "element-china-area-data";
export default {
  data() {
    return {
      options: regionDataPlus,
      selectedOptions: [],
      isOnline: false,
      newAdd: "",
      radio: 0,
      adress: [],
      isShow: false,
      isTrue: false,
      intoAdd: "",
    };
  },
  methods: {
    handleChange(value) {
      this.newAdd =
        CodeToText[value[0]] + CodeToText[value[1]] + CodeToText[value[2]];
      if (value[2] != "" && value[1] != "" && value[0] != "") {
        this.isTrue = true;
      }else{
        this.isTrue=false
      }
    },
    // 重复加载
    jiazai() {
      this.axios
        .get("/address?userid=" + this.$store.state.userId)
        .then((res) => {
          let address = res.data.result;
          this.adress = address;
          if (address.length) {
            this.$store.commit("address", this.adress[0].address);
          }
        });
    },
    // 删除地址
    del(index, val) {
      this.axios.post("/delAdd", "id=" + val).then((res) => {
        this.jiazai();
      });
    },
    change() {
      this.$store.commit("address", $("#" + this.radio).text());
    },
    address() {
      if (this.isShow) {
        this.isShow = false;
        this.isTrue=false;
        $(".button").html("添加地址");
      } else {
        this.isShow = true;
        $(".button").html("取消添加");
      }
    },
    add() {
      let add=this.intoAdd.trim()
      if(add==""){
        this.$message({
          message:"请输入详细信息",
          type:'error'
        })
        return
      }
      this.newAdd+=add;
      this.axios
        .post(
          "/newAdd",
          "newAdd=" + this.newAdd + "&userid=" + this.$store.state.userId
        )
        .then((res) => {
          this.isShow = false;
          $(".button").html("添加地址");
          this.jiazai();
          this.intoAdd=""
          this.isTrue=false
        });
    },
  },
  mounted() {
    this.jiazai();
    if (this.$store.state.isOnline) {
      this.isOnline = true;
    } else {
      this.isOnline = false;
    }
  },
  components: {
    headerM,
  },
};
</script>
<style scoped>
.el-radio-group {
  display: flex;
  flex-direction: column;
  width:100vw;
}
.el-radio-group label {
  text-align: left;
  margin: 10px;
  margin-bottom: 0;
  width: 70vw;
  overflow: hidden;
  text-overflow: ellipsis; /*显示为省略号 */
  display: -webkit-box; /*对象作为伸缩盒子模型显示 */
  -webkit-box-orient: vertical; /*设置或检索伸缩盒对象的子元素的排列方式 */
  -webkit-line-clamp: 2; /*显示行数## 标题文字 ## */
}
.el-radio-group div div{
  position: relative;
}
.el-radio-group label span {
  left: 0;
}
.el-button {
  margin-top: 10px;
}
.el-radio span {
  float: left;
  background-color: cornsilk;
}
.newAdd{
  margin-top: 50px;
}
.right{
  position: absolute;
  right: 3vw;
  top: 0;
}
</style>
<style>
.el-radio-group {
  display: flex;
  flex-direction: column;
  width:100vw !important;
}
  .el-cascader-menu{
  min-width: 0px !important;
  width: 130px !important;
}
</style>